<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="html"></p>
        <p v-html="html"></p>
        <p :title="title">日照香炉生紫烟</p>
        <p class="cell" :class="'box '+classname">遥看瀑布挂前川</p>
        <button @click="changeColor">改变颜色</button>
        <h1>{{flag}}</h1>
        <button @click="flag=!flag">修改 flag</button>
        <p v-if="flag" >flag 为真</p>
        <p v-else-if="!flag" >flag 为假</p>
        <ol>
            <li v-for="item in list" >{{item}}</li>
        </ol>
        <a :[attr]="url">点击</a>
        <button @click="attr='title'">点击修改 attr</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const { createApp }=Vue
        const app=createApp({
            data(){
                return{
                    msg:"你无法改变过去，但你任然可以搞砸未来。",
                    html:'<p style=“color=red”>123</p>',
                    title:'古诗',
                    classname:'blue',
                    flag:true,
                    list:[
                    '稀饭',
                    '黄焖鸡',
                    '大盘鸡',
                    '口水鸡',
                    '地锅鸡',
                    '叫花鸡',
                    '肯德基'
                    ],
                    attr: 'href',
                    url: 'https://www.baidu.com'
                }
            },
            methods: {
                changeColor(){
                    this.classname=this.classname=='red'?'blue':'red'
                }
            },
        })
        
        app.mount("#app");
        
    </script>
</body>
</html>


